@import "utils";
.MainHead {
  padding: 1.75rem;
  display: flex;
  align-items: center;
  @include media("<large") {
    padding: 1rem;
  }
  .button-area {
    .search-btn {
      display: none;
      @include media("<large") {
        display: flex;
      }
      color: $oc-violet-6;
      font-size: 2rem;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 1.25rem;

      align-items: center;
      justify-content: center;
      &:active {
        background: $oc-gray-1;
      }
    }
    .desktop {
      @include media("<medium") {
        display: none;
      }
    }
    .mobile {
      display: none;
      @include media("<medium") {
        display: inline;
      }
    }
  }
  .mobile-logo {
    @include media(">=large") {
      display: none;
    }
    font-family: "Inconsolata";
    color: $oc-gray-9;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-size: 2rem;
    font-weight: 500;
    .badge {
      color: $oc-red-6;
      font-style: italic;
      font-size: 0.875rem;
      padding: 0.25rem;
      position: absolute;
      line-height: 0.875rem;
      font-weight: 700;
      top: 0;
      left: 5.15rem;
    }
  }
  .spacer {
    flex: 1;
  }
  .right-area {
    display: flex;
    align-items: center;
  }
  @include media("<large") {
    background: white;
    padding-bottom: 0;
  }
}
